<script setup lang="ts">
import { Search } from '@element-plus/icons-vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

import { reqSearchHospitalByName } from '@/services/modules/home';
import type { IHospitalInfo } from '@/services/modules/home/type';

const $router = useRouter();

// interface ISearchValue {
//   value: string;
//   hoscode: string;
// }
// const searchValue = ref<ISearchValue>();
const hosname = ref<string>('');
const fetchResultData = async (keywords: string, cb: any) => {
  const res: IHospitalInfo = await reqSearchHospitalByName(keywords);
  const showData = res.data.map((item) => ({
    value: item.hosname,
    hoscode: item.hoscode,
  }));
  cb(showData);
};
// 可抽取
const goToHospital = (item: any) => {
  // console.log('search go:', item.hoscode);
  $router.push({ path: '/hospital/register', query: { hoscode: item.hoscode } });
};
</script>
<template>
  <div class="search">
    <el-autocomplete
      v-model="hosname"
      :prefix-icon="Search"
      :fetch-suggestions="fetchResultData"
      @select="goToHospital"
      clearable
      class="seacrh-input"
      :trigger-on-focus="false"
      placeholder="请输入医院名称"
    />
    <el-button class="search-btn">搜索</el-button>
  </div>
</template>
<style scoped lang="scss">
.search {
  width: 800px;
  margin: 0 auto;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 深度选择器: >>> /deep/ ::v-deep */

  :deep(.el-autocomplete) {
    flex: 1;
  }

  .search-btn {
    width: 80px;
  }
}
</style>
